var moldUnitDetail;
$(function () {
    $("#jqGrid").Grid({
        url: '../mold/cost',
        rownumWidth:35,
        caption:vm.q.yearly+'模具单台明细',
        jsonReader: {
            root: "statResult",
            page: "1",
            total: "statResult.length",
            records: "statResult.length"
        },
        height: 510,
        pager: null,
        rowNum: 1000,
        colModel: [
            {label: '模具号', name: 'moldNo', index: 'MODULE_NO', width: 150},
            {label: '统计模板', name: 'moldTypeName', index: 'MOLD_TYPE_NAME', width: 120},
            {label: '目标值', name: 'theorySingleCost', index: 'THEORY_SINGLE_COST', width: 80},
            {label: '年度', name: 'yearlyCost', index: 'YEARLY_COST', width: 80},
            {label: '1月', name: 'cost1', index: 'SUB_SHOP', width: 80},
            {label: '2月', name: 'cost2', index: 'SUB_SHOP', width: 80},
            {label: '3月', name: 'cost3', index: 'SUB_SHOP', width: 80},
            {label: '4月', name: 'cost4', index: 'SUB_SHOP', width: 80},
            {label: '5月', name: 'cost5', index: 'SUB_SHOP', width: 80},
            {label: '6月', name: 'cost6', index: 'SUB_SHOP', width: 80},
            {label: '7月', name: 'cost7', index: 'SUB_SHOP', width: 80},
            {label: '8月', name: 'cost8', index: 'SUB_SHOP', width: 80},
            {label: '9月', name: 'cost9', index: 'SUB_SHOP', width: 80},
            {label: '10月', name: 'cost10', index: 'SUB_SHOP', width: 80},
            {label: '11月', name: 'cost11', index: 'SUB_SHOP', width: 80},
            {label: '12月', name: 'cost12', index: 'SUB_SHOP', width: 80},
            {label: 'id', name: 'id', key: true, hidden: true},
        ],
        gridComplete:function () {
            $('#jqGrid').closest("div.ui-jqgrid-view")
                .children("div.ui-jqgrid-titlebar")
                .css("text-align", "center","bold","black")
                .children("span.ui-jqgrid-title")
                .css("float", "none");
        }
    });
    vm.getTypeTree();
});
var setting2 = {
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "superType",
            rootPId: 0
        },
        key: {
            url: "nourl",
            name: "typeName" //name 与 typeName 绑定
        },
    },
    callback: {
        onClick: function () {
            var node = typeTree.getSelectedNodes();
            vm.q.moduleType = node[0].id;
            vm.query()
        }

    }
};
var vm = new Vue({
    el: '#rrapp',
    data: {
        showList: true,
        title: null,
        showChart:false,
        q: {
            moduleType: '',//模具类别
            yearly:'',//年份
        },
        option:{
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['上水道', '下水道', '钢盖', '箱体'],
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 35,
                bottom: 20,
            },
            grid: {
                top:'15%',
                left: '3%',
                right: '14%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '平均',
                    type: 'line',
                    data: [],
                    symbolSize: 0, // symbol的大小设置为0
                    showSymbol: false, // 不显示symbol
                    itemStyle:{
                        normal: {
                            lineStyle: {
                                width: 0, // 线宽是0
                                color: 'rgba(0, 0, 0, 0)' //改为透明色
                            }
                        }
                    },
                    center: ['30%', '50%'],
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: '',
                    type: 'line',
                    data: [],
                    symbolSize: 0, // symbol的大小设置为0
                    showSymbol: false, // 不显示symbol
                    itemStyle:{
                        normal: {
                            lineStyle: {
                                width: 0, // 线宽是0
                                color: 'rgba(0, 0, 0, 0)' //改为透明色
                            }
                        }
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },

            ]
        },
        itemStyle:{
            normal:{
                lineStyle: {
                    width: 0, // 线宽是0
                    color: 'rgba(0, 0, 0, 0)' //改为透明色
                }
            }
        },
        markLine:{
            data: [{ type: 'average', name: 'Avg' }]
        }
    },
    methods: {
        /*查看erchart报表*/
        seeEchart:function (){
            let string = typeof vm.q.yearly
            if(string == 'object'){
                if (vm.q.yearly) {
                    vm.q.yearly = gmt2YearStr(vm.q.yearly);
                }
            }
            if(!moldUnitDetail){
                moldUnitDetail = echarts.init(document.getElementById("container"));
                moldUnitDetail.setOption(this.option, true);
            }
            this.showChart = true;
            openWindow({
                area: ['1400px', '700px'],
                title: "模具单台明细变化",
                content: jQuery("#deptLayer"),
                btn1: function (index) {
                   this.showChart = false;
                },
            });
            moldUnitDetail.setOption(this.option,true);
            this.search()
        },
        search: function () {
            var urls = '../mold/cost/line'+'?yearly='+this.q.yearly+'&moduleType='+this.q.moduleType;
            moldUnitDetail.showLoading();
            Ajax.request({
                url: urls,
                type: "GET",
                contentType: "application/json",
                successCallback: function (res) {
                    moldUnitDetail.hideLoading();
                    var costLine = res.statResult;
                    /*进行修改数据*/
                    for (let i = costLine.series.length-2; i <costLine.series.length ; i++) {
                        costLine.series[i].symbolSize = 0
                        costLine.series[i].showSymbol = 0
                        costLine.series[i].itemStyle = vm.itemStyle;
                        costLine.series[i].markLine = vm.markLine;
                    }
                    console.log(costLine)
                    var option = {
                        legend:{
                          data: costLine.legendData
                        },
                        xAxis: {
                            type: 'category',
                            data: costLine.xaxisData
                        },
                        series: costLine.series
                    };
                    moldUnitDetail.setOption(option);
                }
            });
        },
        query: function () {
            vm.reload();
        },
        reload: function (event) {
            let string = typeof vm.q.yearly
            if(string == 'object'){
                if (this.q.yearly) {
                    this.q.yearly = gmt2YearStr(this.q.yearly);
                }
            }
            // 清空postData缓存数据
            var postData = $("#jqGrid").jqGrid("getGridParam", "postData");
            $.each(postData, function (k, v) {
                delete postData[k];
            });
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                search: true,
                postData: {
                    'moduleType': vm.q.moduleType,
                    'yearly':vm.q.yearly
                },
                page: page
            }).trigger("reloadGrid", [{page:1}]);
        },
        reloadSearch: function () {
            vm.q = {
                moduleType: '',
                yearly:''
            };
            typeTree.cancelSelectedNode();
            vm.reload();
        },
        getTypeTree: function () {
            //加载模具类型树
            Ajax.request({
                url: "../moduletype/select",
                async: true,
                successCallback: function (r) {
                    var tree = r.typeList;
                    typeTree = $.fn.zTree.init($("#typeTree"), setting2, tree);
                    typeTree.expandAll(true);
                }
            });
        },

    },
});
